<template>
  <div id="test-makeTestPaper">
    <!-- 顶部面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>在线测试</el-breadcrumb-item>
      <el-breadcrumb-item>老师出卷</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片内容 -->
    <el-card class="box-card cardTab" shadow="always">
      <!-- 步骤条 -->
      <div slot="header" class="clearfix">
        <el-steps :active="activeStep" finish-status="success" align-center>
          <el-step title="试卷信息"></el-step>
          <el-step title="添加题目"></el-step>
          <el-step title="完成制作"></el-step>
        </el-steps>
      </div>
      <!-- 步骤一 出卷 -->
      <div class="stepItem testInfo" v-show="activeStep==0">
        <el-form label-position="top" label-width="100px" :model="form">
          <el-form-item label="试卷名称" required>
            <el-input v-model="form.testName" placeholder="请输入试卷名称" size="small"></el-input>
          </el-form-item>
          <el-form-item label="课程名称" required>
            <el-select
              v-model="form.selectLesson"
              placeholder="请选择课程"
              style="width: 100%;"
              size="small"
            >
              <el-option
                v-for="item in form.options"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseName"
                @change="selectCourse(item)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 步骤二 出题 -->
      <div class="stepItem addQuestion" v-show="activeStep==1">
        <el-card class="addTab box-card">
          <!-- 题目类型选择 -->
          <div slot="header" class="clearfix">
            <span>题目类型</span>
            <el-radio-group v-model="radio" class="quesType">
              <el-radio
                v-for="item in questionType"
                :key="item.typeId"
                :label="item.typeId"
              >{{item.typeName}}</el-radio>
            </el-radio-group>
          </div>
          <!-- 选择题出题部分 -->
          <div class="item" v-show="radio==1">
            <Choice :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Choice>
          </div>
          <!-- 填空题出题 -->
          <div class="item tkquestion" v-show="radio==2">
            <Gap :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Gap>
          </div>
          <!-- 问答题出题 -->
          <div class="item" v-show="radio==3">
            <Questions :testPaperId="testPaperId" :radio="radio" @upSelectTopic="upSelectTopic"></Questions>
          </div>
        </el-card>
        <!-- 已出题目预览 -->
        <!-- 选择题 -->
        <div class="wrap">
          <SelectTopic :teStPaperInfo="teStPaperInfos" :sum="sum" @seleTopicM="seleTopicM"></SelectTopic>
        </div>
        <!-- 填空题 -->
        <div class="wrap">
          <GapFilling :teStPaperInfo="teStPaperInfos" :sum="sum" @gapM="gapM"></GapFilling>
        </div>
        <!-- 问答题 -->
        <div class="wrap">
          <Questi :teStPaperInfo="teStPaperInfos" :sum="sum" @questiTopicM="questiTopicM"></Questi>
        </div>
        <el-button
          style="margin-top: 12px;"
          @click="finish"
          size="small"
          type="primary"
          id="madeFinish"
        >完成制作</el-button>
      </div>
      <!-- 制作完成 部分 -->
      <div class="stepItem finishMade" v-show="activeStep==3">
        <div class="test-paer-table">
          <div class="test-paer-name">{{tpTitle}}</div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column
              align="center"
              label="科目"
              width="180"
              prop="courseName"
              id="test-paer-title"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="choiceQuestionMin"
              label="选择题"
              width="180"
              class="a"
            ></el-table-column>
            <el-table-column align="center" prop="completionMin" label="填空题"></el-table-column>
            <el-table-column align="center" prop="essayQuestionsMin" label="问答题"></el-table-column>
            <el-table-column align="center" label="总分">{{sum}}</el-table-column>
          </el-table>
        </div>
        <div id="top">
          <el-button style="margin-top: 12px;" @click="prve" size="small" type="primary">上一步</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Choice from "../../components/SetTopic/Choice"
import Gap from "../../components/SetTopic/Gap"
import Questions from "../../components/SetTopic/Questions"
import SelectTopic from "../../components/GetTopic/SelectTopic"
import Questi from "../../components/GetTopic/Questi"
import GapFilling from "../../components/GetTopic/GapFilling"
import {mapState} from 'vuex'
export default {
  data() {
    return {
      activeStep: 0, //步骤参数
      form: {
        //出卷表单
        testName: "", //试卷名称
        selectLesson: "请选择课程", //已选课程
        options: [
          //课程列表
          {
            courseId: -1, //课程ID
            courseName: "请选择课程" //课程名称
          }
        ]
      },
      testPaperId: "", //试卷编号
      questionType: [], //题目类型数组
      radio: 1, //已选题目类型
      cqForm: {
        //选择题表单
        questionTxt: "", //选择题题干
        questionScore: 2 //选择题分数
      },
      anwserOptions: [
        //选择题答案数组
        {
          cqOption: "", //选项内容
          cqIsRight: false //选项是否正确
        },
        {
          cqOption: "",
          cqIsRight: false
        },
        {
          cqOption: "",
          cqIsRight: false
        },
        {
          cqOption: "",
          cqIsRight: false
        }
      ],
      tkqForm: {
        //填空题表单
        questionTxt: "", //填空题题干
        sign: "▁", //标识符
        questionSpace: [] //填空数组
      },
      testPaperInfo: {
        // 试卷信息
        sq: [], //选择题数组
        tkq: [], //填空题数组
        wdq: [] //问答题数组
      },
      tpTitle: "", //试卷名称
      tableData: [
        {
          courseName: "", //科目名
          choiceQuestionMin: 0, //选择题
          completionMin: 0, //填空题
          essayQuestionsMin: 0 //问答题,
        }
      ],
      teStPaperInfos:{},
    };
  },
  watch: {
    "tkqForm.questionTxt": {
      // 监听填空题题干数据变化
      handler(newVal) {
        let newSpace = newVal.split(this.tkqForm.sign); //将题干以标识符为标记分割成数组
        let qSpace = this.tkqForm.questionSpace; //填空数组
        for (let i = 0; i < newSpace.length - 1; i++) {
          if (i >= qSpace.length) {
            //循环判断，如果分割后的数组下标大于等于填空数组的长度
            let tkAnwser = {
              //则在填空数组中添加一个对象
              fqOrder: i + 1, //填空序号
              fqAnswer: "", //填空答案
              fillQuestionScore: [
                //填空分值
                {
                  fqsScore: 2 //第一个空的分值
                }
              ]
            };
            qSpace.push(tkAnwser);
          }
        }
        for (let j = 0; j < qSpace.length; j++) {
          //删除标识符时，将填空数组的最后一个元素删除
          if (j >= newSpace.length - 1) {
            qSpace.splice(j, 1);
          }
        }
      },
      deep: true, //深度监听
      immediate: true
    }
  },
  computed:{
      sum(){
        let _this =this;
        let m= _this.tableData.reduce((sun,item)=>{
         sun =parseInt(sun+item.choiceQuestionMin)+parseInt(item.completionMin)+parseInt(item.essayQuestionsMin)
          return sun
        },0)
        return m;
    },
    ...mapState(["userUid"])
  },
  methods: {
    next() {
      //制作试卷
      if (!this.form.testName.trim()) {
        //判断标题
        this.$message.warning("请输入试卷标题");
      } else if (this.form.selectLesson == "请选择课程") {
        //判断课程类型
        this.$message.warning("请选择课程");
      } else {
        this.MakeTestPaper(); //运行添加试卷方法
      }
    },
    MakeTestPaper() {
      //添加试卷的方法
      let tpTitle = this.form.testName; //试卷标题
      let sLesson = this.form.selectLesson; //课程标题
      let index = this.form.options
        .map(i => {
          return i.courseName;
        })
        .indexOf(sLesson); //筛选出所选课程标题，并拿到已选课程标题下标
      let tpCourseId = this.form.options[index].courseId; //获取课程ID
      let userUid = this.userUid; //获取状态管理中的用户标识符
      this.axios
        .post("/api/TestPaper/MakeTestPaper?uid=" + userUid, {
          //携带标识符发送数据
          tpTitle,
          tpCourseId
        })
        .then(res => {
          if (res.data.code == 1) {
            //判断返回数据结果
            this.testPaperId = res.data.data.testPaperId; //成功后接受返回的试卷ID
            this.getTpInfo(); //获取试卷信息
            this.activeStep++; //步骤条自增到下一步
          } else {
            this.$message.warning(res.data.message)
            //否则返回
            return;
          }
        })
        .catch(err => {
          //错误时打印错误
          console.log(err);
          return;
        });
    },
    getTpInfo() {
      //获取试卷信息
      this.axios
        .get("/api/TestPaper/GetTestPaper", {
          params: {
            //试卷ID
            id: this.testPaperId
          }
        })
        .then(res => {
          //返回试卷数据结果
          this.teStPaperInfos=res.data //拿到试卷问题数组
          this.teStPaperInfos.questions.forEach(i=>i.editing = false)
        });
    },
    //子组件调用更新数据
    upSelectTopic() {
      this.getTpInfo();
    },
    seleTopicM(score){
      this.tableData[0].choiceQuestionMin=parseInt(score)
    },
    questiTopicM(score){
      this.tableData[0].essayQuestionsMin=parseInt(score)
    },
    gapM(score){
      this.tableData[0].completionMin=parseInt(score)
    },
    finish() {
      //完成制作
      this.activeStep += 2; //步骤条更新
      this.tpTitle = this.form.testName; //试卷标题
      let courseName = this.form.selectLesson; //课程类型
      let [choiceQuestionMin, completionMin, essayQuestionsMin] = [this.tableData[0].choiceQuestionMin,this.tableData[0].completionMin,this.tableData[0].essayQuestionsMin]; //定义三个分数
      let newtableD = [
        //表格数据
        {
          courseName, //科目名
          choiceQuestionMin, //选择题总分
          completionMin, //填空题总分
          essayQuestionsMin //问答题总分,
        }
      ];
      this.$set(this, "tableData", newtableD); //更新表格数据
    },
    prve() {
      //上一步
      this.activeStep -= 2;
    },
    selectCourse(item) {
      //选择课程类型
      this.form.selectLesson = item.courseName;
    }
  },
  created() {
    this.axios.get("/api/Class/GetAllCourse").then(res => {
      //获取课程类型
      res.data.forEach(element => this.form.options.push(element));
    });
    this.axios
      .get("/api/TestPaper/GetQuestionType")
      .then(res => (this.questionType = res.data)); //获取题目类型
  },
  components: {
    Choice,
    Gap,
    Questions,
    SelectTopic,
    GapFilling,
    Questi
  }
};
</script>

<style lang="less" scoped>
//卡片表
.cardTab {
  width: 100%;
  margin-top: 20px;
}
.cardTab .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.cardTab .clearfix:after {
  clear: both;
}
//试卷信息表格
.testInfo form {
  width: 50%;
  margin: auto;
  .el-button {
    display: block;
    margin: auto;
  }
}
//题目类型单选按钮
.quesType {
  margin-left: 10px;
}
//题目表
.wrap {
  margin-top: 20px;
}
.tkquestion {
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
//序号
.orderNum {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background-color: #f56c6c;
  float: right;
  margin-top: 10px;
}
//填空答案行
.tkqAnwserLine {
  display: flex;
  /deep/.el-input-number {
    margin-top: 5px;
  }
  /deep/.el-input:first-child input {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
}
//填空题答案
/deep/ .tkAnwsers {
  width: 169px;
  outline: none;
  border: none;
  text-align: center;
  border-bottom: 1px solid #ccc;
  height: 20px;
}
//完成制作按钮
#madeFinish {
  position: fixed;
  top: 231px;
  right: 75px;
}
/deep/.is-leaf {
  color: #000;
}
//试卷信息表格
/deep/.el-table td div {
  // color: red;
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
/deep/.el-table td:first-child div {
  background-color: transparent;
  color: #000 !important;
  font-size: 16px;
}
.test-paer-table {
  margin-top: 40px;
}
.test-paer-name {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
//上一步按钮
#top {
  /deep/ button {
    display: block;
    margin: auto;
  }
}
.topic-grade {
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
</style>